import { fetchChannelList } from '@/http/channel'
import type { Channel } from '@/http/type'
import { useState, useEffect } from 'react'
import { Table } from 'antd'
import type { TableProps } from 'antd'

const Detail = () => {
  const [channelList, setChannelList] = useState<Channel[]>()
  useEffect(() => {
    fetchChannelList().then((res) => {
      setChannelList(res.data.data)
    })
  }, [])

  const columns: TableProps<Channel>['columns'] = [
    {
      key: 'id',
      title: 'ID',
      dataIndex: 'id',
    },
    {
      key: 'name',
      title: '名称',
      dataIndex: 'name',
    },
    {
      key: 'color',
      title: '颜色',
      dataIndex: 'color',
    },
    {
      key: 'description',
      title: '描述',
      dataIndex: 'description',
    },
    {
      key: 'action',
      title: '操作',
    },
  ]

  return (
    <div>
      <h1>Detail</h1>
      <Table dataSource={channelList} columns={columns}></Table>
    </div>
  )
}

export default Detail
